<template>
    <div>
         <h1>显示食谱信息页面</h1>
    </div>
    食谱标题:
    <input type="text" v-model="ya.name">
食谱分类:
  <select v-model="ya.helteTypeId">
                             <option value="0">==请选择食谱分类==</option>
                             <option v-for="a in obj" :value="a.helteTypeId">{{a.helteTypeName}}</option>
                        </select>

     <input type="button" value="查询" class="btn btn-info" @click="sea">
     <table class="table">
           <thead>  
               <tr>
                 <td>食谱标题</td>
                  <td>食谱分类名称</td>
                   <td>标签</td>
                    <td>分享</td>
                     <td>收藏</td>
                      <td>图片</td>
                       <td>更新人</td>
                        <td>更新时间</td>
                         <td>状态</td>
                    
               </tr>
           </thead>

           <tbody>  
               <tr v-for="a in data">
                 <td>{{a.helteName}}</td>
                  <td>{{a.helteTypeName}}</td>
                   <td>{{a.heltebQ}}</td>
                    <td>{{a.helteNum}}</td>
                     <td>{{a.helteSc}}</td>
                      <td><img style="width:45px;height:45px;" :src="axios.defaults.baseURL+a.helteImg"></td>
                       <td>{{a.name}}</td>
                        <td>{{moment( a.helteDate).format("yyyy-MM-DD")}}</td>
                         <td>{{a.state==true?"已发布":"未发布"}}</td>
                    
               </tr>
           </tbody>
     </table>
</template>

<script setup lang="ts">
  import axios from 'axios';
   import {ref,onMounted} from 'vue';
 import moment from 'moment'

    import {useRouter} from 'vue-router';
     const router=useRouter();
onMounted(()=>{
    helteTypes();
    ShowHelte();

})
 
  const obj=ref({
     "helteTypeId": 0,
    "helteTypeName": ""
  })
   const helteTypes=()=>{
       axios.get("https://localhost:7048/api/HelteType/helteTypes").then(res=>{
           obj.value=res.data;

       })
   }


 const ya=ref({
     name:"",
     helteTypeId:0,

 })
 const sea=()=>{
     ShowHelte();
 }

   

    const  data=ref([{
         "name": "林俊杰",
    "helteDate": "2022-02-06T00:00:00",
    "helteNum": 20,
    "helteTypeId": 1,
    "state": true,
    "helteSc": 20,
    "heltebQ": "好吃",
    "helteId": 4,
    "helteImg": "/pic/f49a928d-4ae9-4ce6-a351-49bcdc57c4f012.jpg",
    "helteTypeName": "华莱士龙虾",
    "helteName": "黄焖鸡米饭"
    }])


 const ShowHelte=()=>{
    axios.get("https://localhost:7048/api/Helte/ShowHelte",{params:ya.value}).then(res=>{
         data.value=res.data;

    })
 }
</script>

<style scoped>

</style>